import { useQueryTask } from "../../../api/task";
import { useQueryTaskType } from "../../../api/task-type";
import { Kanban } from "../../../types/kanban";
import {
  useKanbanQueryKey,
  useTaskModal,
  useTaskQueryKey,
  useTaskSearchParams,
} from "./utils";
import { BugIcon } from "../../../components/BugIcon";
import { TaskIcon } from "../../../components/TaskIcon";
import styled from "@emotion/styled";
import { Button, Card, Dropdown, Menu, Modal } from "antd";
import { CreateTaskView } from "./create-task";
import { Task } from "../../../types/task";
import { MarkText } from "../../../components/MarkText";
import { Row } from "../../../components/lib";
import { useDeleteKanban } from "../../../api/kanban";
import {
  Drag,
  DragChild,
  Drop,
  DropChild,
} from "../../../components/drag-and-drop";

const TaskTypeIcon = ({ id }: { id: number }) => {
  const { data: taskTypes } = useQueryTaskType();
  const name = taskTypes?.find((item) => item.id == id)?.name;
  if (!name) return null;
  return name == "task" ? <TaskIcon /> : <BugIcon />;
};
const TaskCard = ({ task }: { task: Task }) => {
  const { queryTaskDetailFromID } = useTaskModal();
  const { name } = useTaskSearchParams();
  return (
    <Card
      style={{ marginBottom: ".5rem", cursor: "pointer" }}
      onClick={() => queryTaskDetailFromID(task.id)}
    >
      <MarkText name={task.name} keyword={name} />
      <TaskTypeIcon id={task.typeId} />
    </Card>
  );
};

const More = ({ kanban }: { kanban: Kanban }) => {
  const { mutateAsync } = useDeleteKanban(useKanbanQueryKey());
  const handleDelteKanban = () => {
    Modal.confirm({
      title: "确定删除？",
      cancelText: "取消",
      okText: "确定",
      onOk: () => mutateAsync(kanban),
    });
  };

  const menu = (
    <Menu
      items={[
        {
          key: "delete",
          label: (
            <Button type="link" danger onClick={handleDelteKanban}>
              删除
            </Button>
          ),
        },
      ]}
    />
  );
  return (
    <Dropdown overlay={menu}>
      <Button type="link">...</Button>
    </Dropdown>
  );
};

export const KanBanColumn = ({ kanban }: { kanban: Kanban }) => {
  const { data: allTasks } = useQueryTask(
    useTaskQueryKey(),
    useTaskSearchParams()
  ); //查询项目所有的task
  // const tasks = allTasks?.filter(item => item.kanbanId == kanban.id);
  return (
    <Container>
      <Row between>
        <h3>{kanban.name}</h3>
        <More kanban={kanban} />
      </Row>

      <TaskContainer>
        <Drop type="ROW" direction="vertical" droppableId={`${kanban.id}`}>
          <DropChild style={{ minHeight: "1rem" }}>
            {allTasks?.map((item, index) => {
              if (item.kanbanId != kanban.id) return null;
              return (
                <Drag
                  key={`task-${item.id}`}
                  draggableId={`task-${item.id}`}
                  index={index}
                >
                  <DragChild>
                    <TaskCard task={item} />
                  </DragChild>
                </Drag>
              );
            })}
          </DropChild>
        </Drop>
        <CreateTaskView kanbanId={kanban.id} />
      </TaskContainer>
    </Container>
  );
};

export const Container = styled.div`
  height: 100%;
  min-width: 27rem;
  border-radius: 6px;
  background-color: rgb(244, 245, 247);
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1rem;
  margin-right: 1.5rem;
`;

const TaskContainer = styled.div`
  overflow: scroll;
  flex: 1;
  ::-webkit-scrollbar {
    display: none;
  }
`;
